<template>
  <z-paging
      :auto="i == index"
      ref="paging"
      v-model="dataList"
      :data-key="i"
      @query="queryList"
      :fixed="false"
      height="70vh"
  >
    <block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
      <w-blind-date-item :dataInfo="newsItem"></w-blind-date-item>
    </block>
  </z-paging>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick, shallowRef } from 'vue'
import { getArticleList } from '@/api/news'
import {getGuestsList} from "@/api/new";

const props = withDefaults(
    defineProps<{
      cid: number
      i: number
      index: number
      list_calss: string | number
      filter: any
      reload: number
    }>(),
    {
      reload: 0,
      cid: 0,
      list_calss: 0,
      filter: {
        nickname: '',
        age: '',
        height: '',
        weight: '',
        workplace: '',
        marriage: '',
        nation: '',
        work: '',
        jtqk: '',
        education: '',
        income: '',
      }
    }
)

const paging = shallowRef<any>(null)
const dataList = ref([])
const isFirst = ref<boolean>(true)

watch(
    () => props.index,
    async () => {
      await nextTick()
      if (props.i == props.index && isFirst.value) {
        isFirst.value = false
        paging.value?.reload()
      }
    },
    { immediate: true }
)

watch(
    () => props.reload,
    async () => {
      await nextTick()
      console.log('props.i',props.i)
      console.log('props.index',props.index)
      if (props.i == props.index) {
        paging.value?.reload()
      }
    },
    { immediate: true }
)

const queryList = async (page_no:any, page_size:any) => {
  try {
    const { lists } = await getGuestsList({
      home_class: 0, // 首页分类【0:不限；1:热门推荐；2:附近的人；3:系统匹配】
      ...props.filter, // 筛选条件
      list_calss: props.list_calss, // 专区分类【0:全部/不限;1:教师专区；2:高薪专区；3:政企专区】
      page_no,
      page_size
    })
    paging.value.complete(lists)
  } catch (e) {
    console.log('报错=>', e)
    //TODO handle the exception
    paging.value.complete(false)
  }
}
</script>

<style scoped></style>
